{extend name="public/base"}

{block name="style"}
<link rel="stylesheet" type="text/css" href="__STATIC__/dropzone/basic.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/dropzone/dropzone.css">
<style>
    .dropzone {
        border: 2px dashed #0087F7;
        border-radius: 5px;
        background: white;
    }
</style>
{/block}

{block name="main"}
<!--<form action="{:url('base/upload_image', ['image_type' => 5, 'id' => $id])}" class="dropzone needsclick dz-clickable" id="demo-upload">-->
    <!--<div class="dz-message needsclick">-->
        <!--Drop files here or click to upload.<br>-->
        <!--<span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>-->
    <!--</div>-->
<!--</form>-->

<form id="my-awesome-dropzone" class="dropzone" action="?id={$id}">
    <div class="dropzone-previews"></div>
    <button type="submit" class="layui-btn">上传</button>
</form>

<div class="layui-form news_list">
    <table class="layui-table">
        <colgroup>
            <col width="50">
            <col>
            <col width="15%">
            <col width="15%">
            <col width="15%">
        </colgroup>
        <thead>
        <tr>
            <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose"></th>
            <th>图片</th>
            <th>图片名称</th>
            <th>是否主图</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="news_content">
        {volist name="data" id="vo"}
        <tr>
            <td><input type="checkbox" name="img_id" lay-skin="primary" lay-filter="choose" value="{$vo.id}"></td>
            <td>
                <img style="max-width: 120px; max-height: 120px;" src="{$vo.thumb|get_img_url}" />
            </td>
            <td>{$vo.name}</td>
            <td class="save_field">
                {eq name="vo.is_main" value="1"}
                <a href="javascript:;" class="layui-btn layui-btn-mini">是</a>
                {else /}
                <a href="javascript:;" data-url="{:url('set_main', ['id' => $vo['id']])}" data-title="设为主图？" class="layui-btn layui-btn-mini layui-btn-danger">否</a>
                {/eq}
            </td>
            <td>{$vo.sort}</td>
            <td class="save_field">
                <a href="javascript:;" data-url="{:url('delete_image', ['id' => $vo['id']])}" data-title="删除图片？" class="layui-btn layui-btn-mini layui-btn-danger">删除</a>
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
    <button type="button" class="layui-btn del-all">批量删除</button>
</div>
{/block}

{block name="javascript"}
<script src="__STATIC__/admin/js/jquery-2.0.3.min.js"></script>
<script src="__STATIC__/dropzone/dropzone.js"></script>
<script>
    $(document).ready(function(){
        var submit_layer = '';
            Dropzone.options.myAwesomeDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            // Dropzone settings
            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    submit_layer = top.layer.msg('正在上传，请稍候',{icon: 16,time:false,shade:0.8});
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function() {
                });
                this.on("successmultiple", function(files, response) {
                    if (response.code == 1) {
                        layer.msg('上传成功!', {icon: 6,time:1000});
                        setTimeout(function () {
                            top.layer.close(submit_layer);
                            window.location.reload();
                        }, 100)
                    }
                });
                this.on("errormultiple", function(files, response) {
                });
            }
        }

        $(".del-all").click(function () {
            layer.confirm('删除选中图片？',{icon:3, title:'提示信息'},function(index){
                var ids = [];
                $("input[name='img_id']:checked").each(function () {
                    ids.push($(this).val());
                });
                window.location.href = '{:url("delete_image")}?id=' + ids.join(',');
//                $.post('{:url("delete_image")}', {id : ids.join(',')}, function (msg) {
//
//                });
                layer.close(index);
            });


        });
    });
</script>
{/block}